<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <h3 class="panel-title">报工详情</h3>
        <div class="panel-lead">
            <a href="javascript:history.back()" class="btn btn-default btn-sm">
                <i class="fa fa-arrow-left"></i> 返回
            </a>
        </div>
    </div>
    <div class="panel-body">
        <div class="row">
            <!-- 基本信息 -->
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">基本信息</h4>
                    </div>
                    <div class="panel-body">
                        <table class="table table-bordered">
                            <tr>
                                <td width="120">订单号：</td>
                                <td>{$activeReport.order_no}</td>
                            </tr>
                            <tr>
                                <td>员工姓名：</td>
                                <td>{$activeReport.user_name}</td>
                            </tr>
                            <tr>
                                <td>产品：</td>
                                <td>{$activeReport.product_name}</td>
                            </tr>
                            <tr>
                                <td>型号：</td>
                                <td>{$activeReport.model_name}</td>
                            </tr>
                            <tr>
                                <td>工序：</td>
                                <td>{$activeReport.process_name}</td>
                            </tr>
                            <tr>
                                <td>工作日期：</td>
                                <td>{$activeReport.work_date}</td>
                            </tr>
                            <tr>
                                <td>状态：</td>
                                <td>
                                    {if condition="$activeReport.status == 0"}
                                    <span class="label label-warning">待审核</span>
                                    {elseif condition="$activeReport.status == 1"}
                                    <span class="label label-success">已通过</span>
                                    {elseif condition="$activeReport.status == 2"}
                                    <span class="label label-danger">已拒绝</span>
                                    {/if}
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            
            <!-- 生产信息 -->
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">生产信息</h4>
                    </div>
                    <div class="panel-body">
                        <table class="table table-bordered">
                            <tr>
                                <td width="120">生产数量：</td>
                                <td><strong>{$activeReport.quantity} 件</strong></td>
                            </tr>
                            <tr>
                                <td>工作时长：</td>
                                <td><strong>{$activeReport.work_hours} 小时</strong>
                                    {if condition="$activeReport.start_time && $activeReport.end_time"}
                                    <br><small class="text-muted">{$activeReport.start_time} - {$activeReport.end_time}</small>
                                    {/if}
                                </td>
                            </tr>
                            <tr>
                                <td>计件工资：</td>
                                <td><span class="text-primary">￥{$activeReport.piece_wage}</span></td>
                            </tr>
                            <tr>
                                <td>计时工资：</td>
                                <td><span class="text-primary">￥{$activeReport.time_wage}</span></td>
                            </tr>
                            <tr>
                                <td>总工资：</td>
                                <td><span class="text-success"><strong>￥{$activeReport.total_wage}</strong></span></td>
                            </tr>
                            <tr>
                                <td>备注：</td>
                                <td>{$activeReport.remark|default='无'}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 审核信息 -->
        {if condition="$activeReport.status != 0"}
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">审核信息</h4>
                    </div>
                    <div class="panel-body">
                        <table class="table table-bordered">
                            <tr>
                                <td width="120">审核人：</td>
                                <td>{$auditUser.nickname|default='未知'}</td>
                            </tr>
                            <tr>
                                <td>审核时间：</td>
                                <td>{:date('Y-m-d H:i:s', $activeReport.audit_time)}</td>
                            </tr>
                            {if condition="$activeReport.audit_reason"}
                            <tr>
                                <td>审核意见：</td>
                                <td>{$activeReport.audit_reason}</td>
                            </tr>
                            {/if}
                        </table>
                    </div>
                </div>
            </div>
        </div>
        {/if}
        
        <!-- 图片信息 -->
        <div class="row">
            <!-- 员工上传的图片 -->
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">员工上传的完工图片</h4>
                    </div>
                    <div class="panel-body">
                        {if condition="!empty($workerImages)"}
                        <div class="row">
                            {volist name="workerImages" id="image"}
                            <div class="col-md-4 col-sm-6 mb-3">
                                <div class="thumbnail">
                                    <img src="{$image.image_url}" class="img-responsive" style="height: 120px; width: 100%; object-fit: cover;" onclick="previewImage(this.src)">
                                    <div class="caption text-center">
                                        <small class="text-muted">完工图片</small>
                                    </div>
                                </div>
                            </div>
                            {/volist}
                        </div>
                        {else/}
                        <p class="text-muted text-center">暂无图片</p>
                        {/if}
                    </div>
                </div>
            </div>
            
            <!-- 管理员验货图片 -->
            <div class="col-md-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">验货图片</h4>
                    </div>
                    <div class="panel-body">
                        {if condition="!empty($auditImages)"}
                        <div class="row">
                            {volist name="auditImages" id="image"}
                            <div class="col-md-4 col-sm-6 mb-3">
                                <div class="thumbnail">
                                    <img src="{$image.image_url}" class="img-responsive" style="height: 120px; width: 100%; object-fit: cover;" onclick="previewImage(this.src)">
                                    <div class="caption text-center">
                                        <small class="text-muted">验货图片</small>
                                    </div>
                                </div>
                            </div>
                            {/volist}
                        </div>
                        {else/}
                        <p class="text-muted text-center">暂无验货图片</p>
                        {/if}
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 产品编号图片信息 -->
        {if condition="!empty($productItemImages)"}
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">产品编号完工图片</h4>
                    </div>
                    <div class="panel-body">
                        {volist name="productItemImages" id="images" key="itemNo"}
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                <h5 class="panel-title">产品编号：{$itemNo}</h5>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    {volist name="images" id="image"}
                                    <div class="col-md-3 col-sm-4 col-xs-6 mb-3">
                                        <div class="thumbnail">
                                            <img src="{$image}" class="img-responsive" style="height: 120px; width: 100%; object-fit: cover;" onclick="previewImage('{$image}')">
                                            <div class="caption text-center">
                                                <small class="text-muted">编号{$itemNo}</small>
                                            </div>
                                        </div>
                                    </div>
                                    {/volist}
                                </div>
                            </div>
                        </div>
                        {/volist}
                    </div>
                </div>
            </div>
        </div>
        {/if}
        
        <!-- 操作按钮 -->
        <div class="row">
            <div class="col-md-12 text-center">
                {if condition="$activeReport.status == 0"}
                <a href="scanwork/active_report/audit?id={$activeReport.id}" class="btn btn-info">
                    <i class="fa fa-check"></i> 审核
                </a>
                {/if}
                <a href="javascript:history.back()" class="btn btn-default">
                    <i class="fa fa-arrow-left"></i> 返回
                </a>
            </div>
        </div>
    </div>
</div>

<!-- 图片预览模态框 -->
<div class="modal fade" id="imagePreviewModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">图片预览</h4>
            </div>
            <div class="modal-body text-center">
                <img id="previewImage" src="" class="img-responsive">
            </div>
        </div>
    </div>
</div>

<script>
function previewImage(src) {
    $('#previewImage').attr('src', src);
    $('#imagePreviewModal').modal('show');
}
</script> 